<template>
	<view class="content">
		<view class="zy-list-bank" >
			<view class="zy-list-bank-item" v-for="(item,index) in bankcardList"   @click="selectBank(item)">
				<bank-item  :key="index" :bankCode="item.bankCode" :cardCode="item.cardNo" :bankName="item.bankName"></bank-item>
				<view class="zy-remove" style="width: 60rpx;height: 60rpx;" @click.stop="open(item.id)">
					<zywork-icon   type="icon-chahao" size="60" color="#ffffff"></zywork-icon>
				</view>
			</view>
		</view>
		<view class="placeholder">
			
		</view>
		<button class="zy-add-btn" @tap="goaddpay()">添加银行卡</button>
	</view>
</template>

<script>
	import bankItem from '@/components/bank-item/bank-item.vue'
	export default {
		components: {
			bankItem
		},
		data() {
			return {
				source: 0, // 来源，如果是1，则表示是从下单页面过来的
				pager: {
					pageNo: 1,
					pageSize: 10,
					sortColumn: '',
					sortOrder: '',
					isActive: null,
					
				},
				bankcardList: []
			};
		},
		onLoad(option) {
			if(option.source){
				this.source = option.source;
				uni.setNavigationBarTitle({
					title:"请选择提现到账的银行卡"
				})
			}
		},
		onShow() {
			this.loadBankcardList()
			
		},
		methods:{
			//选择银行卡
			selectBank(item) {
				if (this.source == 1) {
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().cardNo = item.cardNo;
					uni.navigateBack()
				}
			},
			open(id){
				uni.showModal({
				    title: '解绑',
				    content: '是否解绑你的银行卡',
					confirmText:"是",
					cancelText:"否",
				    success:res => {
				        if (res.confirm) {
				            this.deletePay(id);
				        } else if (res.cancel) {
				           
				        }
				    }
				});
			},
			goaddpay() {
			    uni.navigateTo({
			        url: 'addbank',
			    });
			},
			/**
			 * 加载银行卡列表
			 */
			loadBankcardList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$util.doPostJson('/wx/saveYHK',{}, {}, true).then(res => {
					uni.hideLoading()
					if (res.data.code == this.$ResponseStatus.OK) {
						this.bankcardList = res.data.data
						console.log(this.bankcardList)
					} else {
						this.$util.showInfoToast(res.data.message)
					}
				})
			},
			/**
			 * 删除支付方式
			 * @param {Object} id
			 */
			deletePay(id) {
				uni.showModal({
					title: '提示',
					content: '确定要解绑？',
					success: (e) => {
						if (e.confirm) {
							this.$util.doPostForm('/wx/unboundYHK', {id:id},{}, true).then(res => {
								if (res.data.code == this.$ResponseStatus.OK) {
									this.loadBankcardList()
									this.$util.showInfoToast(res.data.message)
								}
								
							})
						}
					}
					
				})
				
			},
		}
	}
</script>

<style lang="scss">
	// @import '@/common/zywork-main.scss';
	page{
		background-color: #ffffff;
		width: 100%;
		height: 100%;
		padding-bottom: 120upx;
	}
	.placeholder{
		width: 100%;
		height: 120rpx;
	}
	.content {
	}
	.zy-list-bank{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.zy-list-bank-item{
			position: relative;
			width: 690rpx;
			.zy-remove{
				position: absolute;
				z-index: 999;
				top: 20rpx;
				right: 5rpx;
			}
		}
	}
	.zy-add-btn {
		position: fixed;
		left: 5%;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: #F85057;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(75, 75, 75, 0.4);
	}
	
</style>
